<template>
  <div class="body">
    <header class="head">
      <img src="../assets/博物馆logo.png" alt="" />
      <div class="search">
        <form action="">
          <el-autocomplete
            class="searchInput"
            v-model="searchtext"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            suffix-icon="el-icon-search"
            @select="handleSelect"
          />
        </form>
        <el-button class="searchTouch" @click="ToItemPage(searchtext)"
          >搜索</el-button
        >
      </div>
    </header>

    <div class="nva">
      <ul class="center_select">
        <li
          v-for="(item, index) in selection_Data"
          :key="index"
          :id="index"
          @mouseover="OnItem(index, item.id)"
          @mouseleave="OutItem"
        >
          <el-button
            :style="
              item.id == OnFlag ? { color: '#c24e45' } : { color: '#666666' }
            "
            type="text"
            >{{ item.name }}</el-button
          >
        </li>
      </ul>
    </div>

    <div class="FuncBody">
      <el-carousel
        type="card"
        trigger="click"
        style="height: 500px; position: absolute; width: 1400px"
      >
        <el-carousel-item
          style="height: 300px"
          v-for="(item, index) in swiper_img"
          :key="index"
        >
          <img :src="item.url" alt="" style="height: 300px; width: 500px" />
        </el-carousel-item>
      </el-carousel>

      <div class="daolan">
        <img
          src="http://bjmuseum.org.cn/web/image/daolan.png"
          style="margin-left: -30px"
          alt=""
        />
        <div class="TwoArea">
          <div class="MuseumEveryday">
            <img
              style="height: 20px; width: 200px; margin-left: 130px"
              src="http://bjmuseum.org.cn/web/image/home-font1.png"
              alt=""
            />
            <el-carousel class="MuseEverSwiper">
              <el-carousel-item
                v-for="(item, index) in recommendList"
                :key="index"
                class="MuseEverSwiper-item"
              >
                <img
                  :src="item.museumimg"
                  @mouseleave="PutNull"
                  @mousemove="PostIndex(item.museumname)"
                  alt=""
                />
              </el-carousel-item>
            </el-carousel>
            <p style="margin-left: -240px; margin-top: 10px">
              {{ EverydayMuseumName }}
            </p>
          </div>

          <div class="container">
            <img
              src="http://bjmuseum.org.cn/web/image/home-font2.png"
              style="width: 250px; margin-bottom: 30px"
              alt=""
            />
            <div style="display: flex; flex-direction: row">
              <div class="mychart">
                <el-radio-group
                  v-model="AreaSearch"
                  @change="SearchNameList(AreaSearch)"
                >
                  <el-radio-button
                    v-for="(item, index) in Area"
                    :key="index"
                    :label="item"
                    style="
                      margin-top: 30px;
                      margin-left: 30px;
                      border: solid 2px #f0f0f0;
                      border-radius: 3px;
                    "
                  />
                </el-radio-group>
              </div>

              <div class="List" style="">
                <el-table
                  style="width: 100%"
                  max-height="300px"
                  :data="nameList"
                  @row-click="Getname"
                  stripe
                >
                  <el-table-column
                    style="width: 100%"
                    prop="museumName"
                    :label="FormHead"
                    @click="Getname(prop)"
                  />
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="HotExhibit">
        <img src="http://bjmuseum.org.cn/web/image/zhanlan.png" alt="" />
        <div
          class="ThreeHot"
          style="display: flex; flex-direction: row; margin-top: 50px"
        >
          <div
            class="flip-box"
            v-for="(item, index) in hotimglist"
            :key="index"
          >
            <img :src="item.url" alt="" />

            <span
              style="
                align-self: center;
                margin-top: -25px;
                margin-left: 65px;
                width: 350px;
                height:20px;
                overflow: hidden;
                color: white;
                background-color: rgba(128, 128, 128, 0.5);
              "
              >{{ item.name }}</span
            >
          </div>
        </div>
      </div>

      
    </div>
  </div>
</template>

<script>
import selection_data from "../assets/selection_data.json";
import SwiperImg from "../assets/Swiper_img";
import hotimglist from "../assets/HotImgList.json";
import qs from "qs";
export default {
  data() {
    return {
      reload:0,
      searchtext: "",
      DropdownFlag: 0,
      selection_Data: selection_data,
      swiper_img: SwiperImg,
      state: "",
      OnFlag: 500,
      museumNameList: [],
      respone: [],
      recommendList: [],
      EverydayMuseumName: "",
      AreaSearch: "西城区",
      FormHead: "西城区博物馆列表",
      Area: [],
      nameList: [],
      hotimglist: hotimglist,
    };
  },

  methods: {
    inputing: function () {
      DropdownFlag = 1;
    },

    OnItem(index, id) {
      console.log("放上来了");
      let _this = this;
      _this.OnFlag = index;
      console.log(_this.OnFlag);
      console.log(id);
    },

    OutItem() {
      this.OnFlag = 500;
    },

    querySearch(queryString, cb) {
      var museumname = this.museumNameList;
      console.info(museumname);
      var results = queryString
        ? museumname.filter(this.createStateFilter(queryString))
        : museumname;

      console.info(results);

      cb(results);
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },

    PostIndex(name) {
      console.info(name);
      this.EverydayMuseumName = name;
    },

    PutNull: function () {
      this.EverydayMuseumName = "";
    },

    ToItemPage(name) {
      console.log(name);
      this.$router.to("/Test");
    },

    SearchNameList(name) {
      var form = new FormData();
      form.append("position", name);
      this.$http.post("/api/Museum/GetMuseumNameByLocal", form).then((res) => {
        this.nameList = res.data.data;
        this.FormHead = name + "博物馆列表";
      });
    },

    Getname(museumname){
      let Name = museumname.museumName;
      this.$http.get("/api/Museum/GetMuseumByName?museumName="+Name).then(res=>{
        console.info(res.data.data[0]);
        let result = res.data;
        this.$router.push({name:'MuseumItem',params:{museumItem:result}});
      })
    }
  },

  beforeMount(){
    if(reload == 0){
      this.$router.go(0)
      this.reload++;
    }
  },

  mounted() {

    this.$http.get("/api/Museum/GetMuseumNameAll").then((res) => {
      console.log(res.data.data);
      this.museumNameList = res.data.data;
    });

    this.$http.get("/api/Museum/GetRecommendList").then((res) => {
      console.log(res.data.data);
      this.recommendList = res.data.data;
    });

    this.EverydayMuseumName = "";

    this.$nextTick(function () {
      this.getPie();
    });

    this.$http.get("/api/Museum/GetAllPosition").then((res) => {
      this.Area = res.data.data;
    });

    var form = new FormData();
    form.append("position", "西城区");
    this.$http.post("/api/Museum/GetMuseumNameByLocal", form).then((res) => {
      this.nameList = res.data.data;
      console.info(this.nameList);
    });
  },

  beforeDestroy(){
    this.reload = 0;
  }
};
</script>

<style>
.body {
  width: 100%;
  height: 8000px;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}

.body .head {
  display: flex;
  flex-direction: row;
  height: 100px;
  width: 100%;
  background-color: #ffffff;
  position: absolute;
  margin-top: -70px;
}

.body .head img {
  height: 50px;
  flex: left;
  margin-top: 15px;
  margin-left: 170px;
}

.body .head .search .searchInput {
  width: 200px;
  height: 20px;
  margin-top: 22px;
  margin-left: 400px;
}

.body .head .search {
  display: flex;
  flex-direction: row;
}

.body .head .searchTouch {
  height: 42px;
  margin-top: 20px;
  margin-left: 3px;
}

.body .head form {
  display: flex;
  flex-direction: column;
}

.body .nva {
  position: relative;
  margin-top: 13px;
  background-color: #f9f9f9;
  box-shadow: 0 5px 10px -5px #06c;
}

.body .nva .center_select {
  display: flex;
  flex-direction: row;
  margin-left: 40px;
  height: 30px;
}

.body .nva .center_select li {
  margin-left: 140px;
  list-style: none;
  align-self: center;
}

.body .FuncBody {
  margin-top: 10px;
  height: 20000px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.body .FuncBody .daolan {
  margin-top: 370px;
  position: absolute;
  margin-left: 0px;
  width: 100%;
}

.body .FuncBody .daolan .TwoArea {
  margin-left: 150px;
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 500px;
}

.body .FuncBody .daolan .TwoArea .container {
  width: 50%;
  height: 300px;
  margin-left: 510px;
  margin-top: 40px;
}

.body .FuncBody .daolan .TwoArea .container .mychart {
  width: 50%;
  height: 100%;
}

.body .FuncBody .daolan .TwoArea .container .List {
  width: 40%;
  height: 100%;
  margin-left: 10px;
  margin-top: 10px;
  border: 2px solid #fff0ac;
}

.body .FuncBody .daolan .TwoArea .MuseumEveryday {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  width: 50%;
  position: absolute;
}

.body .FuncBody .daolan .TwoArea .MuseumEveryday .MuseEverSwiper {
  height: 350px;
  width: 500px;
  margin-top: 5px;
}

.body .FuncBody .daolan .TwoArea .MuseumEveryday .MuseEverSwiper-item {
  height: 350px;
  width: 500px;
}

.body .FuncBody .daolan .TwoArea .MuseumEveryday .MuseEverSwiper img {
  width: 100%;
  height: 100%;
}

.body .FuncBody .HotExhibit {
  margin-top: 970px;
  position: relative;
}

.body .FuncBody .HotExhibit .ThreeHot .flip-box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
}

.body .FuncBody .HotExhibit .ThreeHot .flip-box img {
  width: 360px;
  height: 300px;
  margin-left: 65px;
}
</style>